<template>
    <div>
        <!-- 顶部搜索 -->
        <div class="source-search">
            <div>
                <span class="fa fa-search"></span>
                <input type="text" placeholder="请输入国家地区" />
            </div>
            <img src="../../assets/img/tixing.png" alt />
        </div>
        <!-- 三大筛选栏 -->
        <div class="source-area">
            <div class="source-area-left">
                <div
                    @click="conditionNowColor = index,showList(index)"
                    v-for="(item,index) in condition"
                    :key="index"
                    :class="[conditionNowColor == index?'getColor':'']"
                >
                    <span>{{item}}</span>
                    <span class="fa fa-angle-down"></span>
                </div>
            </div>
            <img src="../../assets/img/paixu.png" alt />
        </div>
        <!-- 地区列表 -->
        <div class="scroll-range" style="height:80vh">
            <etoList></etoList>
        </div>
        <!-- 币种 -->
        <transition name="fade" mode="out-in">
            <div class="source-price source-size" v-show="bShow">
                <transition name="down2">
                    <div v-if="bShow" class="source-size-list">
                        <p
                            @click="getPrice(index,item)"
                            :class="{getColor:index == bColor}"
                            v-for="(item,index) in bList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item}}</p>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 活动 -->
        <transition name="fade" mode="out-in">
            <div class="source-price source-size" v-show="activeShow">
                <transition name="down2">
                    <div v-if="activeShow" class="source-size-list sto-active">
                        <p
                            @click="getActive(index,item)"
                            :class="{getColor:index == activeColor}"
                            v-for="(item,index) in activeList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item}}</p>
                    </div>
                </transition>
            </div>
        </transition>
        <!-- 状态 -->
        <transition name="fade" mode="out-in">
            <div class="source-price source-size" v-show="statusShow">
                <transition name="down2">
                    <div v-if="statusShow" class="source-size-list sto-active">
                        <p
                            @click="getStatus(index,item)"
                            :class="{getColor:index == statusColor}"
                            v-for="(item,index) in statusList"
                            :key="index"
                            class="source-size-list-detail"
                        >{{item}}</p>
                    </div>
                </transition>
            </div>
        </transition>
    </div>
</template>
<script>
import etoList from '../../components/etoList'
export default {
    data() {
        return {
            //三大条件
            conditionNowColor: "-1",
            condition: ["币种", "活动", "状态"],
            //币种
            bShow: false,
            bColor: 0,
            bList: ["不限", "BTC", "USDT", "狗狗币", "以太坊"],
            //活动
            activeShow: false,
            activeColor: 0,
            activeList: ["团购", "拍卖", "众筹"],
            //状态
            statusShow: false,
            statusColor: 0,
            statusList: ["正在进行", "即将进行", "已经结束"]
        };
    },
    components:{
        etoList
    },
    methods: {
        //三大筛选显示与隐藏样式
        showList(index) {
            //console.log(index);
            if (index == "0") {
                this.bShow = !this.bShow;
                this.activeShow = false;
                this.statusShow = false;
            }
            if (index == "1") {
                this.activeShow = !this.activeShow;
                this.bShow = false;
                this.statusShow = false;
            }
            if (index == "2") {
                this.statusShow = !this.statusShow;
                this.activeShow = false;
                this.bShow = false;
            }
        },
        //币种
        getPrice(index, b) {
            this.bColor = index;
            this.condition[0] = b;
            this.bShow = false;
        },
        //活动
        getActive(index, active) {
            this.activeColor = index;
            this.condition[1] = active;
            this.activeShow = false;
        },
        //状态
        getStatus(index, status) {
            this.statusColor = index;
            this.condition[2] = status;
            this.statusShow = false;
        },
        
    }
};
</script>
<style lang="less" scoped>
//颜色变化
.getColor {
    color: @blueColor5 !important;
}
.source-search {
    z-index: 333;
    padding: 10px 15px;
    height: 8vh;
    .flexBetweenCenter();
    div:nth-child(1) {
        .flexStartCenter();
        width: 85%;
        background-color: @bgcolor3;
        color: #a09f9f;
        font-size: 10px;
        padding: 8px 10px;
        border-radius: 10px;
        input {
            font-size: 10px;
            margin-left: 10px;
            background-color: @bgcolor3;
            border: none;
            outline: none;
            padding: 0;
            margin: 0;
        }
    }
    > img {
        width: 20px;
        height: 18px;
    }
}
.source-area {
    padding: 0 15px;
    .flexBetweenCenter();
    height: 5vh;
    .source-area-left {
        width: 80%;
        height: 5vh;
        .flexBetweenCenter();
        div {
            .flexStartCenter();
            font-size: 15px;
            color: @blackColor8;
        }
    }
    img:nth-child(2) {
        width: 12px;
        margin-right: 10px;
    }
}

//币种
.source-price {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 13vh;
    width: 100%;
    height: 87vh;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    div {
        //border-top: 1px solid #E0E0E0;
        width: 100%;
        height: 40vh;
        background-color: #fff;
        overflow-y: scroll;
        .source-size-list-detail {
            font-size: 14px;
            text-align: center;
            padding: 2.5vh 0;
        }
    }
}
//活动
.sto-active {
    height: 26vh !important;
}
</style>
